<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <h1>
        windowlevel/index.html
    </h1>

    This is an example of interactive window/level

    <br>
    <br>

    In this example, the mousemove is captured and adjusts the window/center.  You can also manually set the window/center
    by entering the values in the input elements and hitting apply.  Press the Invert button to toggle invert
    for the image.

    <br>
    <br>

    <div id="dicomImage" style="width:512px;height:512px"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
    </div>

    <label>Window Width</label>
    <input id="ww" type="text" placeholder="e.g. 1000" value="256">
    <label>Window Center</label>
    <input id="wc" type="text" placeholder="e.g. 500" value="128">
    <button id="apply" class="btn">Apply</button>
    <button id="invert" class="btn">Invert</button>

</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>

    $(document).ready(function() {
        // image enable the element
        var element = $('#dicomImage').get(0);
        cornerstone.enable(element);

        // load the image and display it
        var imageId = 'example://1';
        cornerstone.loadImage(imageId).then(function(image) {
           cornerstone.displayImage(element, image);
        });

        // Add event handler to the ww/wc apply button
        $('#apply').click(function (e) {
            var viewport = cornerstone.getViewport(element);
            viewport.voi.windowWidth = parseFloat($('#ww').val());
            viewport.voi.windowCenter = parseFloat($('#wc').val());
            cornerstone.setViewport(element, viewport);
        });

        $('#invert').click(function (e) {
            var viewport = cornerstone.getViewport(element);
            if (viewport.invert === true) {
                viewport.invert = false;
            } else {
                viewport.invert = true;
            }
            cornerstone.setViewport(element, viewport);
        });

        // add event handlers to mouse move to adjust window/center
        $('#dicomImage').mousedown(function (e) {
            var lastX = e.pageX;
            var lastY = e.pageY;

            $(document).mousemove(function (e) {
                var deltaX = e.pageX - lastX,
                        deltaY = e.pageY - lastY;
                lastX = e.pageX;
                lastY = e.pageY;

                var viewport = cornerstone.getViewport(element);
                viewport.voi.windowWidth += (deltaX / viewport.scale);
                viewport.voi.windowCenter += (deltaY / viewport.scale);
                cornerstone.setViewport(element, viewport);
            });

            $(document).mouseup(function (e) {
                $(document).unbind('mousemove');
                $(document).unbind('mouseup');
            });
        });
    });

</script>
</html>
